<template>
  <div class="base64Content" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="base64Main">
      <el-card style="background: black;">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="160px">
          <div class="box"></div>
          <el-form-item label="请输入要加密的字符">
            <el-tooltip class="box-item" effect="light" :content="form.beforeBase64Word" placement="top"
              :disabled="!form.beforeBase64Word">
              <el-input v-model="form.beforeBase64Word" placeholder="请输入要加密的字符" maxlength="1024"
                @keyup.enter="lockBase64Word"></el-input>
            </el-tooltip>
            <el-button @click="lockBase64Word" class="base64Btn" type="info">加密</el-button>
          </el-form-item>
          <div class="box"></div>
          <el-form-item label="加密后的字符">
            <el-tooltip class="box-item" effect="light" :content="form.handlerBeforeBase64Word" placement="top"
              :disabled="!form.handlerBeforeBase64Word">
              <el-input v-model="form.handlerBeforeBase64Word" placeholder="加密后的字符" maxlength="1024" disabled></el-input>
            </el-tooltip>
            <el-button @click="copyBase64Word" class="base64Btn" type="info">复制</el-button>
          </el-form-item>
          <div class="box"></div>
          <el-form-item label="请输入要解密的字符">
            <el-tooltip class="box-item" effect="light" :content="form.afterBase64Word" placement="top"
              :disabled="!form.afterBase64Word">
              <el-input v-model="form.afterBase64Word" placeholder="请输入要解密的字符" maxlength="1024"
                @keyup.enter="unlockBase64Word"></el-input>
            </el-tooltip>
            <el-button @click="unlockBase64Word" class="base64Btn" type="info">解密</el-button>
          </el-form-item>
          <div class="box"></div>
          <el-form-item label="解密后的字符">
            <el-tooltip class="box-item" effect="light" :content="form.handlerAfterBase64Word" placement="top"
              :disabled="!form.handlerAfterBase64Word">
              <el-input v-model="form.handlerAfterBase64Word" placeholder="解密后的字符" maxlength="1024" disabled></el-input>
            </el-tooltip>
            <el-button @click="copyBase64UnWord" class="base64Btn" type="info">复制</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { Base64 } from 'js-base64'
import clipboard3 from 'vue-clipboard3'

const route = useRoute()
const router = useRouter()

const rules = ref<FormRules>({})
const { toClipboard } = clipboard3()

const form = ref<any>({
  beforeBase64Word: '',
  handlerBeforeBase64Word: '',
  afterBase64Word: '',
  handlerAfterBase64Word: '',
})

const lockBase64Word = () => {
  form.value.handlerBeforeBase64Word = Base64.encode(form.value.beforeBase64Word)
}

const unlockBase64Word = () => {
  form.value.handlerAfterBase64Word = Base64.decode(form.value.afterBase64Word)
}

const copyBase64Word = async () => {
  try {
    await toClipboard(form.value.handlerBeforeBase64Word)
    ElMessage({
      type: 'success',
      showClose: true,
      message: '复制成功'
    })
  } catch (error) {
    ElMessage({
      type: 'error',
      showClose: true,
      message: '复制失败'
    })
  }
}

const copyBase64UnWord = async () => {
  try {
    await toClipboard(form.value.handlerAfterBase64Word)
    ElMessage({
      type: 'success',
      showClose: true,
      message: '复制成功'
    })
  } catch (error) {
    ElMessage({
      type: 'error',
      showClose: true,
      message: '复制失败'
    })
  }
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.base64Content {
  width: 100%;
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .base64Main {
    margin-top: 20px;
    padding: 30px;
    .el-card {
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
    }

    .el-form {
      margin-bottom: 30px;
    }


    .el-input {
      width: 400px;
      height: 40px;
    }

    .box {
      height: 15px;
    }

    .base64Btn {
      margin-left: 15px;
      width: 100px;
      height: 40px;
      border-radius: 6px;
    }
  }
}
</style>